import React, { useState, useEffect, useMemo } from 'react';
import { Popover, Input, Icon } from 'antd';
import colorCircle from '@/assets/color-circle.png';
import Colors from './Colors';
import styles from './index.less';

/**
 *
 * 下拉框
 */
const SelectDown = ({ up, disabled, value }) => {
    const [inputValue, setInputValue] = useState('');

    useEffect(() => {
        if (value) {
            setInputValue('已选主题色');
        } else {
            setInputValue('');
        }
    }, [value]);

    const selectStyle = useMemo(() => {
        if (value) {
            return {
                backgroundColor: value,
                backgroundImage: 'none'
            };
        }
        return {
            backgroundColor: 'transparent',
            backgroundImage: `url(${colorCircle})`
        };
    }, [value]);

    return (
        <div className={styles.selectInputWrapper}>
            <div className={styles.selectInput}>
                <Input
                    placeholder="请选择"
                    readOnly
                    disabled={disabled}
                    value={inputValue}
                    prefix={<span className={styles.selectColor} style={selectStyle}></span>}
                    suffix={up ? <Icon type="up" /> : <Icon type="down" />}
                />
            </div>
        </div>
    );
};

/**
 * 颜色选择器
 */
const ColorPicker = React.forwardRef(
    ({ value, onChange, colors, auto, ignoreColors = [], disabled, readOnly }, ref) => {
        const [selectOpen, setSelectOpen] = useState(false);
        const [selectColor, setSelectColor] = useState('');

        useEffect(() => {
            setSelectColor(value);
        }, [value]);

        const handleVisibleChange = v => {
            setSelectOpen(v);
        };

        const handleChange = color => {
            if (onChange) {
                onChange(color);
            }
        };

        const renderContent = () => {
            if (readOnly) {
                return (
                    <div ref={ref} className={`${styles.colorWrapper} ${selectColor ? '' : styles.colorTransparent}`}>
                        <span style={{ backgroundColor: selectColor }}></span>
                        {selectColor ? '已选主题色' : '无主题色'}
                    </div>
                );
            }
            if (disabled) {
                return <SelectDown ref={ref} up={selectOpen} value={selectColor} disabled={disabled} />;
            }
            return (
                <Popover
                    content={
                        <Colors
                            value={value}
                            auto={auto}
                            ignoreColors={ignoreColors}
                            colors={colors}
                            onChange={handleChange}
                        />
                    }
                    onVisibleChange={handleVisibleChange}
                    getPopupContainer={node => node}
                    placement="bottomLeft"
                    trigger="click"
                    ref={ref}
                >
                    <div>
                        <SelectDown up={selectOpen} value={selectColor} disabled={disabled} />
                    </div>
                </Popover>
            );
        };

        return <React.Fragment>{renderContent()}</React.Fragment>;
    }
);

export default ColorPicker;
